<template>
  <div class="c-upload-input">
    <el-input v-model="name" readonly></el-input>
    <c-upload-single ref="upload" @change="upload">
      <c-icon-btn name="upload"></c-icon-btn>
    </c-upload-single>
  </div>
</template>
<script>
import { upload } from '@/http/api/v1/file'
export default {
  name: 'CUploadInput',
  components: {},
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      name: ''
    }
  },
  computed: {},
  watch: {
    value(val) {
      val || (this.name = '')
    }
  },
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    upload(files) {
      upload({ files }).then(({ data }) => {
        this.name = files.name
        this.$emit('input', data)
      })
    },
    uploadClick() {
      this.$refs.upload.handleClick()
    }
  }
}
</script>
<style lang="scss">
.c-upload-input {
  font-size: 0;
  .el-input {
    width: 220px;
    vertical-align: middle;
  }
  .c-upload-single {
    margin-left: 10px;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
    .el-button {
      vertical-align: middle;
    }
  }
}
</style>
